import React, { ReactNode, useEffect, useState } from 'react'
import { getBrandData } from '@/utils/cates'
import styles from './index.module.less'
import { useNavigate } from 'react-router-dom'
// 接口
export interface Itemstype {
  pmsProductCategory: {
    name: string
  }
  children: [
    {
      name: string
    }
  ]
}
//分类列表渲染数据的接口
export interface CateType {
  name: string
  icon: string
  id: string
}
export default function Cate() {

  let [cateList, setcateList] = useState([])
  //分类数据请求
  async function getlistCate() {
    // console.log(2222222);

    let res: resType = await getBrandData()
    // console.log(res);

    if (res.code === 20000) {
      setcateList(res.data.category.children)
    }
  }

  useEffect(() => {
    //调用分类数据请求
    getlistCate()
  }, [])

  // 点击跳转到商品列表页面
  const navegite = useNavigate()
  function gotoCatelist(val: string) {
    // console.log(val);
    localStorage.setItem('types', '')
    navegite('/cate/catelist?id=' + val)
  }


  //分类下部分两个列表
  let bottomlist = cateList.splice(2).map((item: CateType) => {
    return (
      <div onClick={() => gotoCatelist(item.id)} key={item.id} className={styles.cataLastitem}>
        <div className={styles.cataLasttitle}>{item.name}</div>
        <div className={styles.cateListimga}>
          <img src={item.icon} alt="" />
        </div>
      </div>
    )
  }
  )
  //分类上部分两个列表
  let toplist = cateList.splice(0, 2).map((item: CateType) => {
    let backgroundColor = ''
    backgroundColor = item.name === '风格' ? 'white' : ''
    return (
      <div onClick={() => gotoCatelist(item.id)} style={{ backgroundColor }} key={item.id} className={styles.itemsContent}>
        <div className={styles.catalistTitle}>{item.name}</div>
        <div className={styles.cateListitem}>
          <img src={item.icon} alt="" />
        </div>
      </div>
    )
  }
  )

  return (
    <div className={styles.cateCont}>

      <div >{toplist}</div>
      <div className={styles.bottomlist}> {bottomlist} </div>
    </div>
  )
}
